<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 医疗助手 - 专业版</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        :root {
            --primary: #3a7bd5;
            --secondary: #00d2ff;
            --accent: #4fc3f7;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;
            --info: #3498db;
            --bg-gradient: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
            --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', 'Roboto', sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: var(--bg-gradient);
            color: white;
            padding: 25px 0;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: var(--card-shadow);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.1)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            opacity: 0.3;
            z-index: -1;
        }
        
        .header-content {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo-icon {
            font-size: 42px;
            margin-right: 20px;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .logo-text h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
        }
        
        .logo-text p {
            font-size: 15px;
            opacity: 0.9;
            letter-spacing: 0.3px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 50px;
            backdrop-filter: blur(5px);
            transition: var(--transition);
        }
        
        .user-info:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: var(--primary);
            font-weight: bold;
            font-size: 18px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .main-content {
            display: flex;
            gap: 25px;
        }
        
        .sidebar {
            flex: 0 0 280px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            height: fit-content;
            transition: var(--transition);
        }
        
        .sidebar:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
        }
        
        .sidebar-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 25px;
            color: var(--dark);
            display: flex;
            align-items: center;
            position: relative;
            padding-bottom: 10px;
        }
        
        .sidebar-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--bg-gradient);
            border-radius: 3px;
        }
        
        .sidebar-title i {
            margin-right: 12px;
            color: var(--primary);
        }
        
        .department-list {
            list-style: none;
        }
        
        .department-item {
            padding: 14px 18px;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            border: 1px solid #eee;
        }
        
        .department-item:hover {
            border-color: var(--accent);
            transform: translateX(5px);
        }
        
        .department-item.active {
            background: var(--bg-gradient);
            color: white;
            border-color: transparent;
            box-shadow: 0 5px 15px rgba(58, 123, 213, 0.3);
        }
        
        .department-item i {
            margin-right: 12px;
            font-size: 20px;
        }
        
        .department-item.active i {
            color: white;
        }
        
        .chat-container {
            flex: 1;
            background: white;
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            display: flex;
            flex-direction: column;
            height: 75vh;
            transition: var(--transition);
        }
        
        .chat-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
        }
        
        .chat-header {
            padding: 18px 25px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f9fbfd;
            border-radius: 15px 15px 0 0;
        }
        
        .chat-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--dark);
            display: flex;
            align-items: center;
        }
        
        .chat-title i {
            margin-right: 12px;
            color: var(--primary);
        }
        
        .chat-actions {
            display: flex;
            align-items: center;
        }
        
        .chat-actions button {
            background: none;
            border: none;
            color: var(--dark);
            cursor: pointer;
            margin-left: 15px;
            font-size: 18px;
            transition: var(--transition);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chat-actions button:hover {
            color: var(--primary);
            background: rgba(74, 111, 165, 0.1);
        }
        
        .chat-messages {
            flex: 1;
            padding: 25px;
            overflow-y: auto;
            background-color: #fafcff;
            scroll-behavior: smooth;
        }
        
        .message {
            margin-bottom: 25px;
            max-width: 80%;
            animation: fadeInUp 0.5s;
        }
        
        .user-message {
            margin-left: auto;
            background: var(--bg-gradient);
            color: white;
            padding: 15px 20px;
            border-radius: 20px 20px 5px 20px;
            box-shadow: 0 5px 15px rgba(58, 123, 213, 0.2);
            position: relative;
        }
        
        .user-message::after {
            content: "";
            position: absolute;
            right: -8px;
            top: 12px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid var(--primary);
        }
        
        .ai-message {
            margin-right: auto;
            background: white;
            color: var(--dark);
            padding: 15px 20px;
            border-radius: 20px 20px 20px 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            border: 1px solid #eee;
        }
        
        .ai-message::before {
            content: "";
            position: absolute;
            left: -8px;
            top: 12px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid white;
        }
        
        .ai-message::after {
            content: "";
            position: absolute;
            left: -7px;
            top: 12px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid #eee;
            z-index: -1;
        }
        
        .message-time {
            font-size: 13px;
            color: #999;
            margin-top: 8px;
            text-align: right;
        }
        
        .prescription-card {
            background-color: #f8fafc;
            border-left: 4px solid var(--success);
            padding: 18px;
            margin-top: 18px;
            border-radius: 0 12px 12px 0;
            animation: fadeIn 0.5s;
        }
        
        .prescription-title {
            font-weight: 600;
            color: var(--success);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            font-size: 16px;
        }
        
        .prescription-title i {
            margin-right: 10px;
        }
        
        .medicine-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px dashed #ddd;
            animation: fadeIn 0.5s;
        }
        
        .medicine-item:last-child {
            border-bottom: none;
        }
        
        .medicine-name {
            font-weight: 500;
            color: var(--dark);
        }
        
        .medicine-dosage {
            color: #666;
            font-size: 14px;
        }
        
        .chat-input {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            align-items: center;
            background: #f9fbfd;
            border-radius: 0 0 15px 15px;
        }
        
        .chat-input-container {
            flex: 1;
            position: relative;
        }
        
        .chat-input textarea {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 25px;
            padding: 15px 60px 15px 20px;
            resize: none;
            height: 50px;
            font-family: inherit;
            transition: var(--transition);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .chat-input textarea:focus {
            outline: none;
            border-color: var(--accent);
            height: 100px;
            box-shadow: 0 5px 15px rgba(74, 111, 165, 0.1);
        }
        
        .symptom-suggestions {
            position: absolute;
            bottom: calc(100% + 10px);
            left: 0;
            width: 100%;
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            z-index: 10;
            display: none;
        }
        
        .symptom-suggestions.show {
            display: block;
            animation: fadeInDown 0.3s;
        }
        
        .symptom-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .symptom-tag {
            background-color: #e9f5ff;
            color: var(--primary);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            font-family: inherit;
        }
        
        .symptom-tag:hover {
            background-color: #d0e7ff;
            transform: translateY(-2px);
        }
        
        .send-button {
            background: var(--bg-gradient);
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin-left: 15px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(58, 123, 213, 0.3);
        }
        
        .send-button:hover {
            transform: scale(1.05) rotate(5deg);
            box-shadow: 0 8px 20px rgba(58, 123, 213, 0.4);
        }
        
        .send-button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .history-panel {
            position: fixed;
            top: 0;
            right: -450px;
            width: 450px;
            height: 100vh;
            background: white;
            box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
            transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index: 1000;
            padding: 25px;
            overflow-y: auto;
        }
        
        .history-panel.open {
            right: 0;
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .history-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--dark);
            display: flex;
            align-items: center;
        }
        
        .history-title i {
            margin-right: 12px;
            color: var(--primary);
        }
        
        .close-history {
            background: none;
            border: none;
            font-size: 22px;
            cursor: pointer;
            color: #999;
            transition: var(--transition);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .close-history:hover {
            color: var(--danger);
            background: rgba(231, 76, 60, 0.1);
        }
        
        .history-item {
            padding: 18px;
            border-radius: 12px;
            margin-bottom: 15px;
            background: #f9fbfd;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid #eee;
        }
        
        .history-item:hover {
            transform: translateX(5px);
            border-color: var(--accent);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .history-date {
            font-size: 13px;
            color: #999;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        
        .history-date i {
            margin-right: 8px;
        }
        
        .history-content {
            font-size: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        
        .history-department {
            display: inline-block;
            background: rgba(58, 123, 213, 0.1);
            color: var(--primary);
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 12px;
            margin-top: 8px;
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s;
            backdrop-filter: blur(5px);
        }
        
        .overlay.open {
            opacity: 1;
            pointer-events: auto;
        }
        
        .typing-indicator {
            display: flex;
            padding: 12px 18px;
            background: white;
            border-radius: 20px 20px 20px 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            width: fit-content;
            margin-bottom: 25px;
            border: 1px solid #eee;
        }
        
        .typing-dot {
            width: 10px;
            height: 10px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 4px;
            animation: typingAnimation 1.4s infinite ease-in-out;
        }
        
        .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typingAnimation {
            0%, 60%, 100% {
                transform: translateY(0);
                background-color: #ccc;
            }
            30% {
                transform: translateY(-5px);
                background-color: var(--primary);
            }
        }
        
        .department-icon {
            width: 26px;
            height: 26px;
            margin-right: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .emergency-alert {
            background-color: #fff3f3;
            border-left: 4px solid var(--danger);
            padding: 18px;
            margin-top: 18px;
            border-radius: 0 12px 12px 0;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }
        
        .emergency-title {
            font-weight: 600;
            color: var(--danger);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            font-size: 16px;
        }
        
        .emergency-title i {
            margin-right: 10px;
        }
        
        .emergency-content {
            line-height: 1.6;
        }
        
        .emergency-actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
        }
        
        .emergency-btn {
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }
        
        .emergency-btn i {
            margin-right: 8px;
        }
        
        .emergency-btn.call {
            background: var(--danger);
            color: white;
        }
        
        .emergency-btn.call:hover {
            background: #c0392b;
        }
        
        .emergency-btn.hospital {
            background: white;
            color: var(--danger);
            border: 1px solid var(--danger);
        }
        
        .emergency-btn.hospital:hover {
            background: #fff3f3;
        }
        
        .loading-bar {
            height: 3px;
            background: var(--bg-gradient);
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            z-index: 1001;
            transition: width 0.3s;
        }
        
        .no-history {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }
        
        .no-history i {
            font-size: 50px;
            margin-bottom: 20px;
            color: #ddd;
        }
        
        .no-history p {
            margin-top: 10px;
            font-size: 16px;
        }
        
        .symptom-input-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            font-size: 20px;
            transition: var(--transition);
        }
        
        .symptom-input-btn:hover {
            transform: translateY(-50%) scale(1.1);
        }
        
        @media (max-width: 1200px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                flex: 1;
                margin-bottom: 25px;
            }
            
            .chat-container {
                height: 65vh;
            }
            
            .history-panel {
                width: 90%;
                right: -90%;
            }
            
            .history-panel.open {
                right: 0;
            }
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }
            
            .logo {
                margin-bottom: 20px;
                justify-content: center;
            }
            
            .user-info {
                margin-top: 15px;
            }
            
            .message {
                max-width: 90%;
            }
            
            .chat-input textarea:focus {
                height: 80px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="loading-bar" id="loading-bar"></div>
    
    <div class="container">
        <header>
            <div class="header-content">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <div class="logo-text">
                        <h1>AI 医疗助手</h1>
                        <p>专业医疗咨询 · 智能诊断建议 · 24小时在线</p>
                    </div>
                </div>
                <div class="user-info">
                    <div class="user-avatar">U</div>
                    <span>用户</span>
                </div>
            </div>
        </header>
        
        <div class="main-content">
            <div class="sidebar">
                <div class="sidebar-title">
                    <i class="fas fa-procedures"></i>
                    <span>选择科室</span>
                </div>
                <ul class="department-list">
                    <li class="department-item active" data-dept="general">
                        <i class="fas fa-user-md"></i>
                        <span>全科医生</span>
                    </li>
                    <li class="department-item" data-dept="internal">
                        <i class="fas fa-lungs"></i>
                        <span>内科</span>
                    </li>
                    <li class="department-item" data-dept="surgery">
                        <i class="fas fa-scalpel"></i>
                        <span>外科</span>
                    </li>
                    <li class="department-item" data-dept="pediatrics">
                        <i class="fas fa-baby"></i>
                        <span>儿科</span>
                    </li>
                    <li class="department-item" data-dept="gynecology">
                        <i class="fas fa-female"></i>
                        <span>妇科</span>
                    </li>
                    <li class="department-item" data-dept="dermatology">
                        <i class="fas fa-allergies"></i>
                        <span>皮肤科</span>
                    </li>
                    <li class="department-item" data-dept="ent">
                        <i class="fas fa-ear-listen"></i>
                        <span>耳鼻喉科</span>
                    </li>
                    <li class="department-item" data-dept="ophthalmology">
                        <i class="fas fa-eye"></i>
                        <span>眼科</span>
                    </li>
                    <li class="department-item" data-dept="psychology">
                        <i class="fas fa-brain"></i>
                        <span>心理科</span>
                    </li>
                </ul>
            </div>
            
            <div class="chat-container">
                <div class="chat-header">
                    <div class="chat-title">
                        <i class="fas fa-comment-medical"></i>
                        <span>与AI医生对话</span>
                    </div>
                    <div class="chat-actions">
                        <button id="show-history" title="历史记录">
                            <i class="fas fa-history"></i>
                        </button>
                        <button id="clear-chat" title="清空对话">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </div>
                </div>
                
                <div class="chat-messages" id="chat-messages">
                    <div class="message ai-message animate__animated animate__fadeInUp">
                        <div>您好！我是AI医疗助手，可以为您提供专业的医疗咨询和建议。</div>
                        <div class="message-time">今天 <span id="current-time"></span></div>
                    </div>
                </div>
                
                <div class="chat-input">
                    <div class="chat-input-container">
                        <textarea id="user-input" placeholder="请描述您的症状或健康问题..." rows="1"></textarea>
                        <button class="symptom-input-btn" id="symptom-input-btn" title="快速输入症状">
                            <i class="fas fa-plus-circle"></i>
                        </button>
                        <div class="symptom-suggestions" id="symptom-suggestions">
                            <div style="font-size: 14px; color: #666; margin-bottom: 10px;">常见症状快速选择</div>
                            <div class="symptom-tags">
                                <button class="symptom-tag">头痛</button>
                                <button class="symptom-tag">发热</button>
                                <button class="symptom-tag">咳嗽</button>
                                <button class="symptom-tag">腹痛</button>
                                <button class="symptom-tag">乏力</button>
                                <button class="symptom-tag">失眠</button>
                                <button class="symptom-tag">头晕</button>
                                <button class="symptom-tag">恶心</button>
                                <button class="symptom-tag">呕吐</button>
                                <button class="symptom-tag">腹泻</button>
                                <button class="symptom-tag">胸闷</button>
                                <button class="symptom-tag">关节痛</button>
                            </div>
                        </div>
                    </div>
                    <button class="send-button" id="send-button">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="history-panel" id="history-panel">
        <div class="history-header">
            <div class="history-title">
                <i class="fas fa-history"></i>
                <span>咨询历史记录</span>
            </div>
            <button class="close-history" id="close-history">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div id="history-list">
            <!-- 历史记录将在这里动态生成 -->
        </div>
    </div>
    
    <div class="overlay" id="overlay"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const userInput = document.getElementById('user-input');
            const sendButton = document.getElementById('send-button');
            const chatMessages = document.getElementById('chat-messages');
            const showHistoryBtn = document.getElementById('show-history');
            const closeHistoryBtn = document.getElementById('close-history');
            const historyPanel = document.getElementById('history-panel');
            const overlay = document.getElementById('overlay');
            const clearChatBtn = document.getElementById('clear-chat');
            const historyList = document.getElementById('history-list');
            const departmentItems = document.querySelectorAll('.department-item');
            const loadingBar = document.getElementById('loading-bar');
            const symptomInputBtn = document.getElementById('symptom-input-btn');
            const symptomSuggestions = document.getElementById('symptom-suggestions');
            const currentTimeSpan = document.getElementById('current-time');
            
            // 设置当前时间
            const now = new Date();
            currentTimeSpan.textContent = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
            
            // DeepSeek API 配置
            const DEEPSEEK_API_KEY = 'sk-c6a7fb0a88f04c45a858716ce9aec15c';
            const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';
            
            // 当前选择的科室
            let currentDepartment = 'general';
            
            // 历史记录数据
            let chatHistory = JSON.parse(localStorage.getItem('medicalChatHistory')) || [];
            
            // 渲染历史记录
            renderHistory();
            
            // 科室选择
            departmentItems.forEach(item => {
                item.addEventListener('click', function() {
                    departmentItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    currentDepartment = this.getAttribute('data-dept');
                    
                    // 添加系统消息
                    const deptName = this.querySelector('span').textContent;
                    addMessage('ai', `您已切换到${deptName}，请描述您的症状。`);
                });
            });
            
            // 发送消息
            sendButton.addEventListener('click', sendMessage);
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 显示历史记录面板
            showHistoryBtn.addEventListener('click', function() {
                historyPanel.classList.add('open');
                overlay.classList.add('open');
            });
            
            // 关闭历史记录面板
            closeHistoryBtn.addEventListener('click', function() {
                historyPanel.classList.remove('open');
                overlay.classList.remove('open');
            });
            
            // 点击遮罩层关闭历史记录面板
            overlay.addEventListener('click', function() {
                historyPanel.classList.remove('open');
                overlay.classList.remove('open');
            });
            
            // 清空聊天
            clearChatBtn.addEventListener('click', function() {
                if (confirm('确定要清空当前对话吗？')) {
                    chatMessages.innerHTML = `
                        <div class="message ai-message animate__animated animate__fadeInUp">
                            <div>您好！我是 AI医疗助手，可以为您提供专业的医疗咨询和建议。</div>
                            <div class="message-time">今天 ${formatTime(new Date())}</div>
                        </div>
                    `;
                }
            });
            
            // 症状标签点击
            document.addEventListener('click', function(e) {
                if (e.target.classList.contains('symptom-tag')) {
                    userInput.value = `我有${e.target.textContent}的症状，`;
                    userInput.focus();
                    symptomSuggestions.classList.remove('show');
                }
            });
            
            // 显示/隐藏症状建议
            symptomInputBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                symptomSuggestions.classList.toggle('show');
            });
            
            // 点击页面其他区域隐藏症状建议
            document.addEventListener('click', function() {
                symptomSuggestions.classList.remove('show');
            });
            
            // 阻止症状建议区域点击事件冒泡
            symptomSuggestions.addEventListener('click', function(e) {
                e.stopPropagation();
            });
            
            // 发送消息函数
            function sendMessage() {
                const message = userInput.value.trim();
                if (!message) return;
                
                // 禁用发送按钮
                sendButton.disabled = true;
                
                // 添加用户消息到聊天界面
                addMessage('user', message);
                userInput.value = '';
                
                // 显示加载条
                loadingBar.style.width = '70%';
                
                // 显示AI正在输入
                showTypingIndicator();
                
                // 调用DeepSeek API
                callDeepSeekAPI(message);
                
                // 保存到历史记录
                saveToHistory(message);
            }
            
            // 添加消息到聊天界面
            function addMessage(sender, content, isPrescription = false, isEmergency = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${sender}-message animate__animated animate__fadeInUp`;
                
                if (isPrescription) {
                    messageDiv.innerHTML = `
                        <div>${content.advice}</div>
                        <div class="prescription-card">
                            <div class="prescription-title">
                                <i class="fas fa-prescription-bottle-alt"></i>
                                <span>用药建议</span>
                            </div>
                            ${content.medicines.map(med => `
                                <div class="medicine-item">
                                    <span class="medicine-name">${med.name}</span>
                                    <span class="medicine-dosage">${med.dosage}</span>
                                </div>
                            `).join('')}
                        </div>
                        <div class="message-time">今天 ${formatTime(new Date())}</div>
                    `;
                } else if (isEmergency) {
                    messageDiv.innerHTML = `
                        <div>${content}</div>
                        <div class="emergency-alert">
                            <div class="emergency-title">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span>紧急建议</span>
                            </div>
                            <div class="emergency-content">
                                根据您的症状描述，可能存在严重健康风险，建议立即采取以下措施：
                            </div>
                            <div class="emergency-actions">
                                <button class="emergency-btn call">
                                    <i class="fas fa-phone-alt"></i>
                                    拨打120
                                </button>
                                <button class="emergency-btn hospital">
                                    <i class="fas fa-hospital"></i>
                                    查找最近医院
                                </button>
                            </div>
                        </div>
                        <div class="message-time">今天 ${formatTime(new Date())}</div>
                    `;
                } else {
                    messageDiv.innerHTML = `
                        <div>${content}</div>
                        <div class="message-time">今天 ${formatTime(new Date())}</div>
                    `;
                }
                
                chatMessages.appendChild(messageDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            // 显示AI正在输入
            function showTypingIndicator() {
                const typingDiv = document.createElement('div');
                typingDiv.className = 'typing-indicator';
                typingDiv.id = 'typing-indicator';
                typingDiv.innerHTML = `
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                `;
                chatMessages.appendChild(typingDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            // 隐藏AI正在输入
            function hideTypingIndicator() {
                const typingDiv = document.getElementById('typing-indicator');
                if (typingDiv) {
                    typingDiv.remove();
                }
            }
            
            // 调用DeepSeek API
            function callDeepSeekAPI(message) {
                // 创建对话历史
                const messages = [
                    {
                        role: "system",
                        content: `你是一位专业的${getDepartmentName(currentDepartment)}医生，请根据患者的症状提供专业的医疗建议。`
                    },
                    {
                        role: "user",
                        content: message
                    }
                ];
                
                // 获取之前的对话上下文
                const previousMessages = Array.from(chatMessages.querySelectorAll('.message')).slice(1, -1);
                previousMessages.forEach(msg => {
                    const role = msg.classList.contains('user-message') ? 'user' : 'assistant';
                    const content = msg.querySelector('div:first-child').textContent;
                    messages.push({ role, content });
                });
                
                fetch(DEEPSEEK_API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
                    },
                    body: JSON.stringify({
                        model: "deepseek-chat",
                        messages: messages,
                        temperature: 0.7,
                        max_tokens: 1000
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`API请求失败: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 完成加载条
                    loadingBar.style.width = '100%';
                    setTimeout(() => {
                        loadingBar.style.width = '0';
                    }, 300);
                    
                    hideTypingIndicator();
                    const aiResponse = data.choices[0].message.content;
                    
                    // 解析AI响应
                    parseAIResponse(aiResponse, message);
                    
                    // 重新启用发送按钮
                    sendButton.disabled = false;
                })
                .catch(error => {
                    console.error('API调用错误:', error);
                    loadingBar.style.width = '0';
                    hideTypingIndicator();
                    
                    // 显示错误信息
                    addMessage('ai', '抱歉，获取医疗建议时出现错误。请稍后再试或联系技术支持。');
                    
                    // 重新启用发送按钮
                    sendButton.disabled = false;
                });
            }
            
            // 解析AI响应
            function parseAIResponse(response, userMessage) {
                // 检测紧急情况关键词
                const emergencyKeywords = ['紧急', '立即就医', '拨打120', '急诊', '危险', '严重'];
                const isEmergency = emergencyKeywords.some(keyword => response.includes(keyword));
                
                // 检测处方关键词
                const prescriptionKeywords = ['建议用药', '推荐药物', '可以服用', '用药建议'];
                const isPrescription = prescriptionKeywords.some(keyword => response.includes(keyword));
                
                if (isEmergency) {
                    addMessage('ai', response, false, true);
                } else if (isPrescription) {
                    // 尝试提取药物信息 (这里简化处理，实际应用中需要更复杂的解析)
                    const medicines = [];
                    const medicineRegex = /([^\n]+)\s*[:：]\s*([^\n]+)/g;
                    let match;
                    
                    while ((match = medicineRegex.exec(response)) !== null) {
                        if (match[1].includes('药') || match[1].includes('物')) {
                            medicines.push({
                                name: match[1].trim(),
                                dosage: match[2].trim()
                            });
                        }
                    }
                    
                    if (medicines.length > 0) {
                        addMessage('ai', {
                            advice: response.split('\n')[0] || '以下是用药建议：',
                            medicines: medicines
                        }, true);
                    } else {
                        addMessage('ai', response);
                    }
                } else {
                    addMessage('ai', response);
                }
            }
            
            // 保存到历史记录
            function saveToHistory(message) {
                const chatItem = {
                    id: Date.now(),
                    date: new Date(),
                    message: message,
                    department: currentDepartment
                };
                
                chatHistory.unshift(chatItem);
                if (chatHistory.length > 100) {
                    chatHistory.pop();
                }
                
                localStorage.setItem('medicalChatHistory', JSON.stringify(chatHistory));
                renderHistory();
            }
            
            // 渲染历史记录
            function renderHistory() {
                historyList.innerHTML = '';
                
                if (chatHistory.length === 0) {
                    historyList.innerHTML = `
                        <div class="no-history">
                            <i class="fas fa-clock"></i>
                            <h3>暂无历史记录</h3>
                            <p>您与AI医生的对话将显示在这里</p>
                        </div>
                    `;
                    return;
                }
                
                chatHistory.forEach(item => {
                    const historyItem = document.createElement('div');
                    historyItem.className = 'history-item';
                    historyItem.innerHTML = `
                        <div class="history-date">
                            <i class="far fa-calendar-alt"></i>
                            ${formatDate(item.date)}
                        </div>
                        <div class="history-content">${item.message}</div>
                        <div class="history-department">${getDepartmentName(item.department)}</div>
                    `;
                    
                    historyItem.addEventListener('click', function() {
                        // 点击历史记录可以重新加载对话
                        loadHistoryConversation(item.id);
                    });
                    
                    historyList.appendChild(historyItem);
                });
            }
            
            // 加载历史对话
            function loadHistoryConversation(id) {
                const item = chatHistory.find(item => item.id === id);
                if (!item) return;
                
                // 清空当前聊天
                chatMessages.innerHTML = `
                    <div class="message ai-message animate__animated animate__fadeInUp">
                        <div>正在加载历史对话...</div>
                        <div class="message-time">今天 ${formatTime(new Date())}</div>
                    </div>
                `;
                
                // 模拟加载历史对话
                setTimeout(() => {
                    chatMessages.innerHTML = `
                        <div class="message ai-message animate__animated animate__fadeInUp">
                            <div>这是您之前与${getDepartmentName(item.department)}医生的对话</div>
                            <div class="message-time">${formatDate(item.date)}</div>
                        </div>
                        <div class="message user-message animate__animated animate__fadeInUp">
                            <div>${item.message}</div>
                            <div class="message-time">${formatDate(item.date)}</div>
                        </div>
                    `;
                    
                    // 这里应该加载完整的对话历史，简化处理
                    addMessage('ai', '这是之前的回复内容...');
                    
                    // 关闭历史面板
                    historyPanel.classList.remove('open');
                    overlay.classList.remove('open');
                }, 1000);
            }
            
            // 格式化时间
            function formatTime(date) {
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                return `${hours}:${minutes}`;
            }
            
            // 格式化日期
            function formatDate(date) {
                if (typeof date === 'string') {
                    date = new Date(date);
                }
                const now = new Date();
                const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
                
                if (diffDays === 0) {
                    return '今天 ' + formatTime(date);
                } else if (diffDays === 1) {
                    return '昨天 ' + formatTime(date);
                } else {
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const day = date.getDate().toString().padStart(2, '0');
                    return `${month}月${day}日 ${formatTime(date)}`;
                }
            }
            
            // 获取科室名称
            function getDepartmentName(dept) {
                const deptNames = {
                    'general': '全科',
                    'internal': '内科',
                    'surgery': '外科',
                    'pediatrics': '儿科',
                    'gynecology': '妇科',
                    'dermatology': '皮肤科',
                    'ent': '耳鼻喉科',
                    'ophthalmology': '眼科',
                    'psychology': '心理科'
                };
                return deptNames[dept] || '全科';
            }
        });
    </script>
</body>
</html>